<template>
  <div >
    <div style="height:40px;margin-top:20px;">
      <ul class="infro">
        <li @click="reviewed" style="margin-left:0;">
          待审核
          <div class="info" v-show="depate==0"></div>
        </li>
        <li @click="passed">
          已通过
          <div class="info" v-show="depate==1"></div>
        </li>
        <li @click="rejected">
          已拒绝
          <div class="info" v-show="depate==2"></div>
        </li>
        <li @click="perfect">
          待完善
          <div class="info" v-show="depate==3"></div>
        </li>
      </ul>
    </div>
      <div class="index">
         <div style="margin-right:20px;">
          <span style="margin-right:10px;">电话</span>
          <input
           style="width:220px;"
            type="text"
            v-model="chargePersonPhone"
            placeholder="请输入店铺电话"
          />
        </div>
        <div >
          <span style="margin-right:10px;">时间</span>
             <el-date-picker v-model="indatetime" style="height:42px;" size="small" type="daterange" format="yyyy 年 MM 月 dd 日"   value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <div >
          <div >
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;border-radius:5px;"  @click="searchClick" v-show="query==0">查询</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;border-radius:5px;"  @click="searchClick1" v-show="query==1">查询</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;border-radius:5px;"  @click="searchClick2" v-show="query==2">查询</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;border-radius:5px;"  @click="searchClick3" v-show="query==3">查询</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;border-radius:5px;" @click="emptyClick">清空</span>
          </div>
        </div>
      </div>
    <div class="table" v-show="number==1">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="chargePersonPhone" label="账号" width="190"></el-table-column>
        <el-table-column label="所在地区">
          <template slot-scope="scope">
            <span>{{scope.row.shopAdressProvince}}
              {{scope.row.shopAdressProvince == '' ? '' : '-'}}
              {{scope.row.shopAdressCity}}
              {{scope.row.shopAdressDetail == '' ? '' : '-'}}
              {{scope.row.shopAdressDetail}}</span>
          </template>
        </el-table-column>
         <el-table-column prop="shopAdress" label="详细地址"></el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==0?'待审核':'已审核'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,number)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
   
     <div class="table" v-show="number==2">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="chargePersonPhone" label="团长手机号" width="190"></el-table-column>
        <el-table-column label="所在地区">
          <template slot-scope="scope">
            <span>{{scope.row.shopAdressProvince}}
              {{scope.row.shopAdressProvince == '' ? '' : '-'}}
              {{scope.row.shopAdressCity}}
              {{scope.row.shopAdressDetail == '' ? '' : '-'}}
              {{scope.row.shopAdressDetail}}</span>
          </template>
        </el-table-column>
         <el-table-column prop="shopAdress" label="详细地址"></el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==1?'已通过':'有效'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="启用">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.state" :label="1" @change="agreeChange(scope.row)">启用</el-radio>
            <el-radio v-model="scope.row.state" :label="0" @change="agreeChange(scope.row)">禁用</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table" v-show="number==3">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="chargePersonPhone" label="团长手机号" width="190"></el-table-column>
        <el-table-column label="所在地区">
          <template slot-scope="scope">
            <span>{{scope.row.shopAdressProvince}}
              {{scope.row.shopAdressProvince == '' ? '' : '-'}}
              {{scope.row.shopAdressCity}}
              {{scope.row.shopAdressDetail == '' ? '' : '-'}}
              {{scope.row.shopAdressDetail}}</span>
          </template>
        </el-table-column>
          <el-table-column prop="shopAdress" label="详细地址"></el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==2?'已拒绝':'有效'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table" v-show="number==4">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="chargePersonPhone" label="团长手机号" width="190"></el-table-column>
        <el-table-column label="所在地区">
          <template slot-scope="scope">
            <span>{{scope.row.shopAdressProvince}}
              {{scope.row.shopAdressProvince == '' ? '' : '-'}}
              {{scope.row.shopAdressCity}}
              {{scope.row.shopAdressDetail == '' ? '' : '-'}}
              {{scope.row.shopAdressDetail}}</span>
          </template>
        </el-table-column>
          <el-table-column prop="shopAdress" label="详细地址"></el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==3?'待完善':'有效'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,number)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
                v-show="detalrede==1"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
      <el-pagination
                v-show="detalrede==2"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
    <el-pagination
      v-show="detalrede==3"
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-pagination
      v-show="detalrede==4"
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


   
  </div>
</template>
<script>
export default {
  data() {
    return {
      depate:0,
      number:1,
      detalrede:1,
      query:0,
      checkState: 0,
      checkStat:1,
      checkSta:2,
      checkSt:3,
      merchantName:'',
      chargePersonPhone:'',
      createTime:'',
      indatetime:[],
      merchantNo:'',
      leader:'',
      masknum:'',
      arrddea:'',
      startTime:'',
      shopPhone:'',
      endTime:'',
      dateVuale:'',
      page: 1,
      pageSize: 5,
      currentPage:1,
      total:1,
      searchvalue1: "", //合同状态
      radio1:'1',
      searchoptions1: [
        //合同状态
        { label: "有效", value: "1" },
        { label: "无效", value: "0" },
      ],
      arr: [],
    };
  },
  mounted() {
    this.loadShopList();
  },
  methods: {
    agreeChange(val) {
      console.log(val)
      console.log(val.state)
      var param = {
        siteId:val.siteId,
        state: val.state,
      };
      this.axios({
        url: "/site/updateState",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {

      });
    },
    reviewed(){
      this.number=1
      this.depate=0
      this.query=0
      this.detalrede=1
      this.chargePersonPhone=''
      this.indatetime=[]
      var param = {
          checkState:this.checkState,
          page: this.page,
          pageSize: this.pageSize,
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
    passed(){
      this.number=2
      this.depate=1
      this.query=1
      this.chargePersonPhone=''
      this.indatetime=[]
      this.detalrede=2
      var param = {
        checkState:this.checkStat,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          console.log(this.arr)
          this.total=res.data.data.total
      });

    },
    rejected(){
      this.number=3
      this.depate=2
      this.query=2
      this.detalrede=3
      this.chargePersonPhone=''
      this.indatetime=[]
      var param = {
        checkState:this.checkSta,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
    perfect(){
      this.number=4
      this.depate=3
      this.query=3
      this.detalrede=4
      this.chargePersonPhone=''
      this.indatetime=[]
      var param = {
        checkState:this.checkSt,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
    // 详情
    handleClick(row,number){
         this.$router.push({
          path:'/index/afresidencexiangq',
          query:{siteId:row.siteId,number:number}
        })
  },
  cancelClick(){
     this.masknum=false
  },
    //编辑
    edit(row){
       this.$router.push({
        path:'/index/editMerchant',
        query:{row:row}
      })
    },
       //分页
    handleSizeChange(val) {
          this.pageSize = val;
          this.reviewed();
        },
     handleCurrentChange(val) {//分页
          this.page = val;
          this.reviewed();
        },
       //分页
    handleSizeChange1(val) {
          this.pageSize = val;
          this.passed();
        },
     handleCurrentChange1(val) {//分页
          this.page = val;
           this.passed();
        },
          //分页
    handleSizeChange2(val) {
          this.pageSize = val;
          this.rejected();
        },
     handleCurrentChange2(val) {//分页
          this.page = val;
          this.rejected();
        },
    // 添加商家按钮
    addMerchant() {
      this.$router.push("/index/addMerchant")
    },
    // 清空
    emptyClick() {
      this.chargePersonPhone=''
      this.indatetime=[]
      var param = {
        checkState:this.query,
        page: 1,
        pageSize: this.pageSize,
        createTime:this.indatetime[0],
        createTimeNew:this.indatetime[1],
        chargePersonPhone:this.chargePersonPhone,
      };
     
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
       
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
    //查询
    searchClick() {
      this.currentPage = 1
      this.detalrede=1
      var param = {
        checkState:this.checkState,
        page: 1,
        pageSize: this.pageSize,
        createTime:this.indatetime[0],
        createTimeNew:this.indatetime[1],
        chargePersonPhone:this.chargePersonPhone,
      };
     
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
       
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
    // 查询1
    searchClick1() {
      this.currentPage = 1
      this.detalrede=2
         var param = {
              checkState:this.checkStat,
              page: 1,
              pageSize: this.pageSize,
              chargePersonPhone:this.chargePersonPhone,
              createTime:this.indatetime[0],
              createTimeNew:this.indatetime[1]
      };

      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
     // 查询2
    searchClick2() {
      this.currentPage = 1
      this.detalrede=3
      var param = {
        checkState:this.checkSta,
        page: 1,
        pageSize: this.pageSize,
        chargePersonPhone:this.chargePersonPhone,
        createTime:this.indatetime[0],
        createTimeNew:this.indatetime[1]
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
    // 查询2
    searchClick3() {
      this.currentPage = 1
      this.detalrede=4
      var param = {
        checkState:this.checkSta,
        page: 1,
        pageSize: this.pageSize,
        chargePersonPhone:this.chargePersonPhone,
        createTime:this.indatetime[0],
        createTimeNew:this.indatetime[1]
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
    //获取商户财务报表数据
    loadShopList() {
      this.detalrede=1
      var param = {
        checkState:this.checkState,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.axios({
        url: "/site/siteCheck",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
  },
  watch: {},
};
</script>

<style scoped>
/* 申请事件中间的“至”的样式 */
.index>>> .el-range-editor--small .el-range-separator {
  line-height: 36px;
}
.infro li{
  float: left;
  margin: 20px;
}
.info{
  border-bottom:3px solid rgb(253, 81, 81);
  margin-top: 6px;
  
}
.index{
  display: flex;
  justify-content: left;
  margin-top: 50px;


}

/* 表格 */
.table-box {
  margin-top: 40px;
}
.table {
  margin-top:20px;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.info{
    padding-left: 50px;
}
.mask .contenta {
  width: 600px;
  height: 650px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}

.mask .content-top {
  display: flex;
  justify-content:center;
  border-bottom: 1px solid #ddd;
  background-color: #3a68f2;
  color: #fff;
  height: 50px;
  font-size: 18px;
  line-height:50px; 
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 40px;
}

.content-items .item {
  margin: 22px 50px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 160px;
}
.content-bottom{
  margin: 60px 0 20px 190px;

}
</style>